<template>
  <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"
    style="heigth: 50px">
    <el-menu-item index="0">
      <img style="width: 100px" src="/imgs/log_100x100.png" alt="logo" />
    </el-menu-item>

    <div class="flex-grow"></div>
    <el-menu-item v-for="(app, index)  in apps" :index="app.id">
      <template #title>{{ app.name }}</template>
    </el-menu-item>
    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />

  </el-menu>
</template>
<script>

export default {

  setup(props, context) {
    let active = "1";
    let apps = context.attrs.apps;


    function handleSelect(key, keyPath) {
      //console.log(key, keyPath)
      //传到父组件
      //emits.emit("getActiveId",key)
      context.emit("update:activeId", key)
    }

    function handleClose(key, keyPath) {
      console.log(key, keyPath)
    }

    return { apps, active, handleSelect, handleClose }

  }
}

</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>